﻿@model Sheng.WeixinConstruction.Client.Shell.Models.ShakingLotteryViewModel

@{
    ViewBag.SubTitle = "活动";
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}


<style type="text/css">
    body {
        margin-bottom: 0.55rem;
    }

    .campaignName {
        font-size: 0.14rem;
        font-weight: bold;
    }

    .campaignDescription {
        font-size: 0.13rem;
        color: #666;
    }

    #divMemberInfo {
        font-size: 0.14rem;
        line-height: 0.14rem;
        text-align: center;
        margin-top: 0.05rem;
    }


    #divFooter {
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        height: 0.4rem;
        font-size: 0.14rem;
        text-align: center;
        background-color: #F5F5F5;
    }
</style>

@Scripts.Render("~/Scripts/shake.js")

<script>

    var _shaking = false;
    var _shakeEvent;
    var _shakingLayerIndex;

    var _campaignId = getQueryString("campaignId");
    var _periodId = "";

    var _url = '@Request.Url.Scheme://@Request.Url.Host/Campaign/ShakingLottery/@Model.CampaignBundle.Campaign.Domain?campaignId=@Model.CampaignBundle.Campaign.Id';

    $(document).ready(function () {

        var jsApiConfigStr = "@Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.JsApiConfig)";
        jsApiConfigStr = jsApiConfigStr.replace(new RegExp("&quot;", "gm"), "\"");
        jsApiConfigStr = jsApiConfigStr.replace(new RegExp("\r\n", "gm"), "");
        jsApiConfigStr = jsApiConfigStr.replace(new RegExp("\n", "gm"), "");
        var jsApiConfig = eval('(' + jsApiConfigStr + ')');

        wx.config(jsApiConfig);

        @if (Model.CampaignBundle.ShakingLottery.Mode == Sheng.WeixinConstruction.Infrastructure.EnumCampaign_ShakingLotteryMode.Period)
        {
            if (Model.CurrentPeriod != null)
            {
                <text>
        _periodId = '@Model.CurrentPeriod.Id';
        </text>
        }

              @*if (Model.PlayedTimes < Model.CampaignBundle.ShakingLottery.ChanceTimes)
                {
                         <text>
        initShaking();
        </text>
                }
            }*@
        }
        @*else
        {
            if (Model.CampaignBundle.ShakingLottery.Started && Model.PlayedTimes < Model.CampaignBundle.ShakingLottery.ChanceTimes)
            {
                 <text>
        initShaking();
        </text>
            }
        }*@

        @if (Model.CampaignBundle.Campaign.Status == Sheng.WeixinConstruction.Infrastructure.EnumCampaignStatus.Ongoing) {
        //不论当前还有没有机会，都初始化摇一摇
        //以便周期切换时或活动开始时可以直接参与，不用重新打开页面
        @:initShaking();
                }

    });

    wx.ready(function () {
        wx.onMenuShareTimeline({
            title: '@Model.CampaignBundle.Campaign.ShareTimelineTitle', // 分享标题
            link: '@Request.Url.Scheme://@Request.Url.Host/Campaign/ShakingLottery/@Model.CampaignBundle.Campaign.Domain?campaignId=@Model.CampaignBundle.Campaign.Id', // 分享链接
            imgUrl: '@Model.CampaignBundle.Campaign.ShareImageUrl', // 分享图标
            success: function () {
                shareSuccess("ShareTimeline");
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

        wx.onMenuShareAppMessage({
            title: '@Model.CampaignBundle.Campaign.ShareAppMessageTitle', // 分享标题
            desc: '@Model.CampaignBundle.Campaign.ShareAppMessageDescription', // 分享描述
            link: '@Request.Url.Scheme://@Request.Url.Host/Campaign/ShakingLottery/@Model.CampaignBundle.Campaign.Domain?campaignId=@Model.CampaignBundle.Campaign.Id', // 分享链接
            imgUrl: '@Model.CampaignBundle.Campaign.ShareImageUrl', // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                shareSuccess("ShareAppMessage");
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
    });

    wx.error(function (res) {
        alert("error:" + res);
    });

    function shareSuccess(type) {
        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        $.ajax({
            url: "/Api/Campaign/" + type + "/@ViewBag.Domain.Id?campaignId=" + _campaignId,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                // alert(data);

                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    if (resultObj.Point == 0)
                        return;

                    var msg = "";
                    if (resultObj.Point > 0) {
                        msg += "获得积分：" + resultObj.Point;
                    }
                    if (msg != "") {
                        layerAlertBtn(msg);
                    }

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });
    }


    function initShaking() {
        if (window.DeviceMotionEvent) {
            // 移动浏览器支持运动传感事件
            $("#divNotice").html("摇我点我都可以！");

            _shakeEvent = new Shake({
                threshold: 15, // optional shake strength threshold
                timeout: 1000 // optional, determines the frequency of event generation
            });

            _shakeEvent.start();

            window.addEventListener('shake', shake, false);

        } else {
            // 移动浏览器不支持运动传感事件
            $("#divNotice").html("您的手机似乎不支持摇一摇，请点击抽奖！");
        }
    }


    function shake() {

        _shakeEvent.stop();

        if (_shaking)
            return;

        _shaking = true;

        _shakingLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        var delay = parseInt(Math.random() * 3000 + 1, 10);
        setTimeout("getShakeResult()", delay)
    }

    function getShakeResult() {
        $.ajax({
            url: "/Api/Campaign/ShakeShakingLotteryGift/@ViewBag.Domain.Id?campaignId=" + _campaignId + "&periodId=" + _periodId,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                layer.close(_shakingLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    layerAlertBtn("恭喜！您摇得：<br/>" + resultObj.Name, function () {
                        compulsorilyReload(_url);
                    });

                } else {
                    //防止多次进入摇动，在提示后自动刷新一下
                    //用完机会，没有中奖也走这里进入提示
                    layerAlertBtn(data.Message, function () {
                        compulsorilyReload(_url);
                    });

                }
            },
            error: function (xmlHttpRequest) {

                layer.close(_shakingLayerIndex);
                // alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function showCampaignDescription() {
        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        $.ajax({
            url: "/Api/Campaign/GetCampaignDescription/@ViewBag.Domain.Id?id=" + _campaignId,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    var gettpl = document.getElementById('campaignDescription').innerHTML;

                    laytpl(gettpl).render(resultObj, function (html) {
                        var pageii = layer.open({
                            type: 1,
                            content: html,
                            shadeClose: false,
                            style: 'position:fixed; left:0.1rem; top:0.1rem;right:0.1rem; bottom:0.1rem; border:none;'
                        });
                    });

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });

    }



</script>

<script type="text/html" id="campaignDescription">
    <div style="position: fixed; top: 0.1rem; left: 0.1rem; right: 0.1rem; bottom: 0.45rem; overflow: auto;">
        {{ d }}
    </div>
    <div style="position: fixed; bottom: 0.1rem; left: 0.1rem; right: 0.1rem;">
        <div class="divRectangle_Gray" style="margin-top: 0.1rem; " onclick="layer.closeAll()">
            关 闭
        </div>
    </div>
</script>

<div id="divImageContainer">
    <img src="@Model.CampaignBundle.Campaign.ImageUrl" name="img" id="img" style="width: 100%;">
</div>

<div class="divContent">
    <div style="margin-top: 0.06rem" class="campaignName">
        @Model.CampaignBundle.Campaign.Name
    </div>
    <div style="margin-top: 0.06rem" class="campaignDescription">
        @Html.Raw(Model.CampaignBundle.Campaign.Introduction)
    </div>

    <div class="divDotLine" style="margin-top:0.05rem; margin-top:0.1rem; margin-bottom:0.05rem;">
    </div>

    <div style="text-align: center; margin-top: 0.1rem;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="33%" align="center">
                    参与人次<br />
                    <span class="defaultColor" style="font-weight:bold">@Model.DataReport.MemberCount</span>
                </td>
                <td width="33%" align="center">
                    中奖人次<br />
                    <span class="defaultColor" style="font-weight:bold">@Model.DataReport.LuckyMemberCount</span>
                </td>
                <td width="33%" align="center">
                    围观次数<br />
                    <span class="defaultColor" style="font-weight:bold">@Model.DataReport.PageVisitCount</span>
                </td>
            </tr>
        </table>
    </div>

    <div class="divDotLine" style="margin-top:0.05rem; margin-top:0.1rem; margin-bottom:0.05rem;">
    </div>
    <div style="font-size:0.13rem;" onclick="goUrl('/Home/PersonalInfo/@ViewBag.Domain.Id')">
        <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td><img src="/Content/Images/personalIcon.png" style="width:0.5rem;"></td>
                <td>点这里完善个人信息<br />以便中奖后工作人员与您联系</td>
            </tr>
        </table>

    </div>
    <div class="divDotLine" style="margin-top:0.05rem; margin-bottom:0.1rem;">
    </div>

    @if (Model.CampaignBundle.Campaign.Status == Sheng.WeixinConstruction.Infrastructure.EnumCampaignStatus.Preparatory ||
        Model.CampaignBundle.Campaign.Status == Sheng.WeixinConstruction.Infrastructure.EnumCampaignStatus.End)
    {
        <div style="color:#FF0000;text-align:center;margin-top:0.1rem;">
            @if (Model.CampaignBundle.Campaign.Status == Sheng.WeixinConstruction.Infrastructure.EnumCampaignStatus.Preparatory)
            {
                @:活动尚未开始。
            }
            else
            {
                @:活动已结束。
            }
        </div>


    }
    else
    {
        if (Model.CampaignBundle.ShakingLottery.Mode == Sheng.WeixinConstruction.Infrastructure.EnumCampaign_ShakingLotteryMode.Period)
        {
            if (Model.CurrentPeriod == null)
            {
                <div style="color:#FF0000;text-align:center;margin-top:0.1rem;">
                    摇奖即将开始<br />请留意主持人的通知哦~
                </div>

                <div style="text-align:center;margin-top:0.1rem;">
                    <input type="button" value="点击刷新" class="button" onclick="compulsorilyReload(_url)" />
                </div>
            }
            else
            {
                <div style="color:#FF0000;text-align:center;">
                    @Model.CurrentPeriod.Name
                </div>

                if (Model.PlayedTimes < Model.CampaignBundle.ShakingLottery.ChanceTimes)
                {
                    <div style="text-align:center;margin-top:0.1rem;">
                        <img src="/Content/Images/shaking.jpg" style="max-width:65%;margin-top:0.1rem;" onclick="shake()" />
                    </div>

                    <div id="divNotice" class="defaultColor" style="text-align:center;margin-top:0.1rem; " onclick="shake()">
                        摇我点我都可以~
                    </div>

                    <div class="defaultColor" style="text-align:center;margin-top:0.1rem; ">
                        您还有 @(Model.CampaignBundle.ShakingLottery.ChanceTimes - Model.PlayedTimes) 次机会哦~
                    </div>
                }
                else
                {
                    <div style="color:#FF0000;text-align:center;margin-top:0.1rem;">
                        您已用完全部摇奖机会~
                    </div>
                }
            }
        }
        else
        {
            if (Model.CampaignBundle.ShakingLottery.Started)
            {
                if (Model.PlayedTimes < Model.CampaignBundle.ShakingLottery.ChanceTimes)
                {
                    <div style="text-align:center">
                        <img src="/Content/Images/shaking.jpg" style="max-width:65%;margin-top:0.1rem;" onclick="shake()" />
                    </div>

                    <div id="divNotice" class="defaultColor" style="text-align:center;margin-top:0.1rem; " onclick="shake()">
                        摇我点我都可以~
                    </div>

                    <div class="defaultColor" style="text-align:center;margin-top:0.1rem; ">
                        您还有 @(Model.CampaignBundle.ShakingLottery.ChanceTimes - Model.PlayedTimes) 次机会哦~
                    </div>
                }
                else
                {
                    <div style="color:#FF0000;">
                        您已用完全部摇奖机会~
                    </div>
                }
            }
            else
            {
                <div style="color:#FF0000;text-align:center;margin-top:0.1rem;">
                    摇奖即将开始<br />请留意主持人的通知哦~
                </div>

                <div style="text-align:center;margin-top:0.1rem;">
                    <input type="button" value="点击刷新" class="button" onclick="compulsorilyReload(_url)" />
                </div>
            }
        }
    }


    <div style="text-align:center;margin-top:0.15rem;">
        @if (Model.GiftList != null && Model.GiftList.Count > 0)
        {
            <div style="font-weight:bold;color:#FF0000;">
                恭喜中奖，您已中得以下奖品：
            </div>

            foreach (var item in Model.GiftList)
            {
                <div style="color:#FF0000;margin-top:0.05rem; font-size:0.15rem;">
                    @item.Name
                </div>
                <div>
                    <img src="@item.ImageUrl" style="max-width:65%" />
                </div>
            }
        }
    </div>

</div>

<div id="divFooter">
    <table align="center" border="0" style="height:100%;width:100%">
        <tr>
            <td valign="middle" align="center" width="50%">
                <input name="" type="button" class="button" value="活动说明" style="width:90%" onclick="showCampaignDescription()">
            </td>
            <!--<td valign="middle" align="center" width="50%">
                <input name="" type="button" class="button" value="中奖记录" style="width:90%">
            </td>-->
        </tr>
    </table>
</div>
